<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<h:form>
		<h:panelGrid columns="1">
			<a4j:outputPanel id="panel" layout="block">
				<a4j:repeat value="#{capitalsBean.capitals}" var="cap" rows="20"
					id="repeat">
					<rich:panel style="float:left; width:200px; padding:5px;">
						<f:facet name="header">
							<h:panelGroup>
								<h:graphicImage value="#{cap.stateFlag}" />
								<h:outputText value="#{cap.state}" style="font-weight:bold" />
							</h:panelGroup>
						</f:facet>
						<h:panelGrid columns="2">
							<h:outputText value="State Capital" style="font-weight:bold" />
							<h:outputText value="#{cap.name}" />
							<h:outputText value="State TimeZone" style="font-weight:bold" />
							<h:outputText value="#{cap.timeZone}" />
						</h:panelGrid>
					</rich:panel>
				</a4j:repeat>
			</a4j:outputPanel>
			<a4j:outputPanel layout="block">
				<rich:dataScroller for="repeat" render="panel" />
			</a4j:outputPanel>
		</h:panelGrid>
	</h:form>
</ui:composition>